<template>
  <div class="chart">
    <div id="Map"></div>
    <!-- 条件渲染 -->
    <el-button-group >
      <el-button type="primary" size="small" @click="tomap">实时定位</el-button>
      <el-button type="primary" size="small">中国疫情</el-button>
        </el-button-group>
           <!-- 地图 -->
  </div>
</template>
<script>
// vue模块化，表示对外暴露当前对象
export default {
  // 1. 数据
  data(){
    return {
            
    }
  },
  // 2. 方法
  methods:{ 
    tomap(item){
      this.$router.push({
        path:"/map/maps",
        query:item
      })
    },
    loadChinaMap(){
      let data = [
      { name: "北京", value: 5 },
      { name: "天津", value: 4 },
      { name: "河北", value: 3 },
      { name: "山西", value: 1 },
      { name: "内蒙古", value: 2 },
      { name: "辽宁", value: 3 },
      { name: "吉林", value: 3 },
      { name: "黑龙江", value: 2 },
      { name: "上海", value: 5 },
      { name: "江苏", value: 4 },
      { name: "浙江", value: 4 },
      { name: "安徽", value: 1 },
      { name: "福建", value: 1 },
      { name: "江西", value: 5 },
      { name: "山东", value: 2 },
      { name: "河南", value: 1 },
      { name: "湖北", value: 2 },
      { name: "湖南", value: 3 },
      { name: "广东", value: 5 },
      { name: "广西", value: 4 },
      { name: "海南", value: 6 },
      { name: "重庆", value: 3 },
      { name: "四川", value: 5 },
      { name: "贵州", value: 4 },
      { name: "云南", value: 4 },
      { name: "西藏", value: 1 },
      { name: "陕西", value: 1 },
      { name: "甘肃", value: 2 },
      { name: "青海", value: 4 },
      { name: "宁夏", value: 2 },
      { name: "新疆", value: 5 },
      { name: "台湾", value: 1 },
      { name: "香港", value: 1 },
      { name: "澳门", value: 4 },
      { name: "南海诸岛", value: 5 },
      { name: "南海诸岛", value: 5 },
      ];
      var mapdata = Highcharts.maps["cn/china"];
      var chart = Highcharts.mapChart("Map", {
      title: "中国地图",
      colorAxis: {
        min: 0,
        max: 5,
        minColor: "#ffe7b8",
        maxColor: "#f04141",
      },
      series: [
        {
          mapData: mapdata,
          data,
          joinBy: "name",
          dataLabels:{
            enabled:true,
            color:"#fff",
            style:{"fontSize":"10px","fontWeight":"thin"},
            format:`{point.name}`
          },
        },
      ],
      });
    },
 	  },
  // 3. 生命周期
  // vue实例创建完毕
  created(){
    // 加载数据，并且将数据更新到data中的变量中
  },
  // 数据绑定之后 vue实例-> 虚拟dom -> 数据绑定 -> 渲染地图
  mounted(){
     this.loadChinaMap(); 
  },
};
</script>

<style scoped>
#Map
{
  height:450px;
}
</style>